<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		body,div{margin: 0;padding: 0}
		#main{width:800px;height:400px;margin: 50px auto}
		#map{width: 800px;height: 400px;background: url(img/grass.jpg);position: relative;}
		button{width: 100px;height: 40px}
	</style>
</head>
<body>
	<div id="main">
		<button>开始游戏</button>
		<div id="map"></div>
	</div>
	<script type="text/javascript">
		var map = document.getElementById('map');

		//设计蛇(自定义对象有3中方式、采用构造器的形式)
		function Snake(){
			//宽度、高度属性
			this.w = 20;
			this.h = 20;
			//方向属性(默认向右)
			this.direction = 'right';
			//身体属性,将来吃到食物之后，向这个属性里面添加
			this.body = [
				//每一个元素就是一节蛇对象
				{x:2,y:0},		//第一个元素就是蛇头，x属性保存距离x轴2个，y轴上0个
				{x:1,y:0},		//第二个元素就是蛇脖子，距离x轴1个，y轴0个
				{x:0,y:0}		//第三个元素，蛇的尾巴，距离x轴0个，y轴0个
			];
			//根据位置显示蛇
			this.display = function(){
				//根据body 里面元素的个数，创建对应的图片
				for(var i=0;i<this.body.length;i++){
					//创建图像
					var oimg = document.createElement('img');
					oimg.src = 'img/snake.png';

					//设置蛇的宽度、高度
					oimg.style.width = this.w + 'px';
					oimg.style.height = this.h + 'px';

					//设置蛇的位置
					oimg.style.position = 'absolute';
					oimg.style.left = this.body[i].x * this.w +'px';
					oimg.style.top = this.body[i].y * this.h +'px';

					//将创建的img节点对象保存到当前元素属性上身上
					//便于将来找到他并删除
					this.body[i].flag = oimg;

					//确定位置
					map.appendChild(oimg);
				}
			}
			//让蛇跑起来
			this.run = function(){
				//让蛇后面的元素等于前面元素的位置
				//由于蛇头的位置取决于方向，所以蛇头我们单独处理
				for(var i=this.body.length-1;i>0;i--){
					this.body[i].x = this.body[i-1].x;
					this.body[i].y = this.body[i-1].y;
				}
				//蛇头的位置取决于方向
				switch(this.direction){
					case 'right':
						this.body[0].x += 1;
						break;
					case 'left':
						this.body[0].x -= 1;
						break;
					case 'up':
						this.body[0].y -= 1;
						break;
					case 'down':
						this.body[0].y += 1;
						break;
				}
				//判断是否碰到边界
				if(this.body[0].x <0 || this.body[0].y <0 || this.body[0].x > 39 || this.body[0].y>19){
					clearInterval(timer);
					alert('游戏结束');
					return false;					
				}

				//先删除旧的蛇，再重新创建，保证body里面有3个
				for(var i=0;i<this.body.length;i++){
					//参数是img的dom节点对象					
					if(this.body[i].flag != null){
						map.removeChild(this.body[i].flag);
					}
				}

				//按照新的位置，重新创建图像（蛇）
				this.display();

				//跑的过程中判断蛇头是否吃到食物
				if(this.body[0].x == food.x && this.body[0].y == food.y){
					//动画：,因为在300毫秒之后，再执行run方法
					this.body.push({x:0,y:0,flag:null});
					//参数是DOM节点对象
					document.getElementById('map').removeChild(food.flag);
					food.display();
				}
				//判断是否吃到自己
				

			}
		}

		function Food(){
			this.w = 20;
			this.h = 20;
			this.display = function(){
				var oimg = document.createElement('img');
				oimg.src = 'img/food.png';
				//增加flag属性，保存oimg节点对象，便于将来找到他并删除
				this.flag = oimg;

				oimg.style.width = this.w +'px';
				oimg.style.height = this.h +'px';

				this.x = Math.floor(Math.random()*40);
				this.y = Math.floor(Math.random()*20);

				oimg.style.position = 'absolute';
				oimg.style.left = this.x * this.w +'px';
				oimg.style.top = this.y * this.h +'px';

				document.getElementById('map').appendChild(oimg);
			}
		}

		var snake = new Snake();
		snake.display();

		var food = new Food();
		food.display();

		//点击开始游戏，让蛇跑起来
		var timer;
		document.getElementsByTagName('button')[0].onclick = function(){
			//setInterval(snake.run(), 500);	//表示每隔500毫秒执行调用run方法返回的结果
			clearInterval(timer);
			timer = setInterval("snake.run()",800);		//每隔500毫秒让字符串里面的内容运行一次
		}

		document.body.onkeydown = function(ev){
			switch(ev.keyCode){
				case 87:
					if(snake.direction != 'down'){
						snake.direction = 'up';
					}
					break;
				case 83:
					if(snake.direction != 'up'){
						snake.direction = 'down';
					}
					break;
				case 65:
					if(snake.direction != 'right'){
						snake.direction = 'left';
					}
					break;
				case 68:
					if(snake.direction != 'left'){
						snake.direction = 'right';
					}
					break;
			}
		}
	</script>
</body>
</html>